<template>
  <canvas class="super-flow__line">
  </canvas>
</template>
<script>
// import { Component } from './drawLine.js'
export default {
  props: {
    linkInfo: Object
  },
  data () {
    return {
      hoverPadding: 5,
      boxSize: {
        width: 500,
        height: 76,
        offset: 15
      },
      lineStyle: {
        color: '#9ad2ec',
        width: 1
      },
      arrowFormatStyle: {
        arrowX: 4,
        arrowY: 10,
        angleY: 4,
        fillStyle: '',
        color: '#9ad2ec',
        hoverColor: ''
      },
      ctx: null
    }
  },
  mounted () {
    this.ctx = this.$el.getContext('2d')
    this.makeLink(this.linkInfo)

    this.$el.addEventListener('mousemove', this.mousemoveCallback)
    this.$el.addEventListener('mouseout', this.onmouseoutCallback)
  },
  methods: {
    openCurline () {
      // let { layerX, layerY } = ev
      let ele = this.$el.getAttribute('pid')
      if (!document.querySelector(`.mystyle${ele}`).style.display || document.querySelector(`.mystyle${ele}`).style.display === 'none') document.querySelector(`.mystyle${ele}`).style.display = 'block'
      // this.hoverOnline(layerX, layerY)
    },
    mousemoveCallback (ev) {
      let { layerX, layerY } = ev
      let ele = this.$el.getAttribute('pid')
      if (!document.querySelector(`.mystyle${ele}`).style.display || document.querySelector(`.mystyle${ele}`).style.display === 'none') document.querySelector(`.mystyle${ele}`).style.display = 'block'
      this.hoverOnline(layerX, layerY)
    },
    onmouseoutCallback () {
      let ele = this.$el.getAttribute('pid')
      if (document.querySelector(`.mystyle${ele}`).style.display && this.$store.state.bot.botdesignArcPidFlag !== ele) document.querySelector(`.mystyle${ele}`).style.display = 'none'
      else document.querySelector(`.mystyle${ele}`).style.display = 'block'
    },
    hoverOnline (layerX, layerY) {
      const { canvas, line } = this.linkInfo
      if (canvas[0][0] > canvas[1][0]) {
        if (layerX > line[0][0] - this.hoverPadding && layerX < line[0][0] + this.hoverPadding && layerY > line[0][1] && layerY < line[1][1]) {
          return true
        }
      } else if (canvas[0][0] < canvas[1][0]) {

      } else {

      }
    },
    makeLink (thatLine) {
      let canvasWidth = Math.abs(thatLine.canvas[0][0] - thatLine.canvas[1][0]) + this.boxSize.offset * 2 || 10
      let canvasHeight = Math.abs(thatLine.canvas[0][1] - thatLine.canvas[1][1]) - this.boxSize.height
      let cavTop, cavLeft
      cavTop = thatLine.canvas[0][1] + this.boxSize.height + 'px'
      if (thatLine.canvas[0][0] > thatLine.canvas[1][0]) {
        cavLeft = thatLine.canvas[1][0] + this.boxSize.width / 2 - this.boxSize.offset + 'px'
      } else {
        cavLeft = thatLine.canvas[0][0] + this.boxSize.width / 2 - this.boxSize.offset + 'px'
      }
      this.$el.width = canvasWidth
      this.$el.height = canvasHeight
      this.$el.style.top = cavTop
      this.$el.style.left = cavLeft
      this.$el.setAttribute('pid', thatLine.canvasNode[1].id)
      if (this.$el.getContext) {
        this.ctx.beginPath()
        this.ctx.setLineDash([3])
        thatLine.line.forEach((point, idx) => {
          if (idx === 0) {
            this.ctx.moveTo(...point)
          } else {
            this.ctx.lineTo(...point)
            this.ctx.stroke()
          }
        })

        this.ctx.lineWidth = this.lineStyle.width
        this.ctx.strokeStyle = this.lineStyle.color
        this.ctx.stroke()
        this.ctx.closePath()
        this.drawArrow(this.ctx, thatLine.line[3], 20, 10, 1, this.arrowFormatStyle.color)
      }
    },
    drawArrow  (ctx, from, theta, headlen, width, color) {
      theta = typeof (theta) !== 'undefined' ? theta : 30
      headlen = typeof (theta) !== 'undefined' ? headlen : 10
      width = typeof (width) !== 'undefined' ? width : 1
      color = typeof (color) !== 'undefined' ? color : this.arrowFormatStyle.color

      // var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
      //   angle1 = (angle + theta) * Math.PI / 180,
      //   angle2 = (angle - theta) * Math.PI / 180,
      //   topX = headlen * Math.cos(angle1),
      //   topY = headlen * Math.sin(angle1),
      //   botX = headlen * Math.cos(angle2),
      //   botY = headlen * Math.sin(angle2);
      ctx.save()
      ctx.beginPath()

      ctx.moveTo(...from)
      ctx.lineTo(from[0] - this.arrowFormatStyle.arrowX, from[1] - this.arrowFormatStyle.arrowY)
      ctx.lineTo(from[0], from[1] - this.arrowFormatStyle.angleY)
      ctx.lineTo(from[0] + this.arrowFormatStyle.arrowX, from[1] - this.arrowFormatStyle.arrowY)
      // ctx.lineTo(from[0], from[1] + 10);
      ctx.strokeStyle = this.arrowFormatStyle.color
      ctx.fillStyle = this.arrowFormatStyle.color
      ctx.lineWidth = width
      // ctx.fill();
      ctx.fillStyle = this.arrowFormatStyle.fillStyle
      ctx.fill()
      ctx.stroke()
      ctx.restore()
    }
  }
}
</script>
<style>
  .super-flow__line{
    position: absolute;
    cursor: pointer;
  }
</style>
